html {
    line-height: normal;
}

body * {
    white-space: pre-wrap;
}

* {
    margin: 0;
    position: relative;
    border: none;
    font-weight: inherit;
    font-size: inherit;
    border-radius: 0;
    padding-inline: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

*:focus-visible, *:focus {
    outline: none;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* smartphones, touchscreens (https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134) */
@media (hover: none) and (pointer: coarse) {
    @supports (height: 100dvh) { 
        #app {
            /* @TODO Move to #app block once https://caniuse.com/viewport-unit-variants are supported 
                and it works as expected on desktop Safari.
                Note: When more granularity is needed: https://stackoverflow.com/a/25975282 
            */
            height: 100dvh; 
        }
    }
}

#app > .center_x {
    align-self: center;
}

#app > .center_y {
    margin-top: auto;
    margin-bottom: auto;
}

#app > .align_bottom {
    margin-top: auto;
}

#app > .align_left {
    align-self: flex-start;
}

#app > .align_right {
    align-self: flex-end;
}

#app > .exact_height {
    flex-shrink: 0;
}

#app > .fill_height {
    flex-grow: 1;
}
